.clearfix {
  zoom: 1;
  &::after {
    content: "";
    height: 0;
    display: block;
    clear: both;
  }
}

.fl {
  float: left;
  &.middle {
    height: 100%;
    &::before {
      content: " ";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }
  }
}

.fr {
  float: right;
  &.middle {
    height: 100%;
    &::before {
      content: " ";
      display: inline-block;
      vertical-align: middle;
      height: 100%;
    }
  }
}
